<template>
	<view>
		<view class="login-box">
			<view class="box-title">赶快加入我们！</view>
			<view class="input-box">
				<u--form labelWidth="70" labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item labelWidth="70" label="账号" prop="username">
						<u--input v-model="form.username" border="none"></u--input>
					</u-form-item>
					<!-- <u-form-item labelWidth="70" label="手机号" prop="mobile">
						<u--input v-model="form.mobile" border="none">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="20" changeText="20秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
						</u--input>
					</u-form-item> -->
					
					<u-form-item label="手机号" prop="mobile">
											<u--input v-model="form.mobile" border="none"></u--input>
										</u-form-item>
										<u-form-item label="验证码" prop="code">
											<u--input v-model="form.code" border="none">
					
												<template slot="suffix">
													<u-code ref="uCode" @change="codeChange" seconds="30" changeText="30秒重新获取"></u-code>
													<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
												</template>
											</u--input>
										</u-form-item>

					
					<u-form-item labelWidth="70" label="密码" prop="password">
						<u--input :type="showPassword?'text':'password'" v-model="form.password" border="none">
							<template slot="suffix">
								<u-icon :color="showPassword?'#00aaff':'#989898'" @click="showPassword=!showPassword"
									size="28" name="eye"></u-icon>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item labelWidth="70" label="重复密码" prop="repassword">
						<u--input :type="showPassword?'text':'password'" v-model="form.repassword" border="none">
							<template slot="suffix">
								<u-icon :color="showPassword?'#00aaff':'#989898'" @click="showPassword=!showPassword"
									size="28" name="eye"></u-icon>
							</template>
						</u--input>
					</u-form-item>
					<u-button @click="register" type="primary" style="margin-top: 10px;" text="立即注册"></u-button>
					<view class="tips">
						我有账户，<text class="register" @click="login">立即登录！</text>
					</view>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: false,
				tips:'',
				value:'',
				form: {
					account: '',
					password: '',
					repassword: ''
				},
				rules: {
					'username': [{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						},
						{
							min: 4,
							max: 12,
							message: "长度在4-12个字符之间",
							trigger: ['blur', 'change']
						},
					],
					'code': [{
											type: 'string',
											required: true,
											message: '请填写验证码',
											trigger: ['blur', 'change']
										}, ],

					'mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}

					],
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'repassword': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.form.password == this.form.repassword;
							},
							message: '两次手机号码不一致',
							trigger: ['change', 'blur'],
						}
					]
				},
			}
		},
		methods: {
			
			 codeChange(text) {
			        this.tips = text;
			      },
			      getCode() {
			        if (this.$refs.uCode.canGetCode) {
			          // 模拟向后端请求验证码
			          uni.showLoading({
			            title: '正在获取验证码'
			          })
			          setTimeout(() => {
			            uni.hideLoading();
			            // 这里此提示会被this.start()方法中的提示覆盖
			            uni.$u.toast('验证码已发送');
			            // 通知验证码组件内部开始倒计时
			            this.$refs.uCode.start();
			          }, 2000);
			        } else {
			          uni.$u.toast('倒计时结束后再发送');
			        }
			      },
			rememberChange(e) {
				console.log(e)
				if (e[0] == 'remember') {
					this.$u.vuex('remember', true)
				}
			},
			showpassword() {
				this.showPassword = !this.showPassword
			},
			login() {
				uni.redirectTo({
					url: '/pages/public/login'
				})
			},
			register() {
				let that = this
				this.$refs.uForm.validate().then(res => {
					uni.$u.http.post('/user/register', this.form).then((res) => {
						if (res.code == 1) {
							that.$u.vuex('vuex_token', res.data.userinfo.token)
							that.$u.vuex('vuex_user', res.data.userinfo)
							let lastPage=this.$store.state.vuex_lastPage
							console.log(that.vuex_lastPage.url)
							uni.$u.toast(res.msg)
							setTimeout(() => {
								if (lastPage.url) {
									uni.$u.route({
										url: lastPage.url,
										params: lastPage.params
									})
								} else {
									uni.redirectTo({
										url: '/pages/public/login'
									})
								}
							}, 2000)

						}
						console.log(res)
					}).catch((e) => {
						// console.log(e)
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			}

		}
	}
</script>

<style lang="scss">
	.login-box {
		margin: 30px auto 0 auto;
		width: 90vw;
		opacity: 1;
		border-radius: 48px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

		.box-title {
			padding-top: 60px;
			font-size: 24px;
			font-weight: 400;
			letter-spacing: -0.4px;
			line-height: 20px;
			color: rgba(42, 130, 228, 1);
			text-align: center;
			vertical-align: top;
		}

		.input-box {
			padding: 20px;

			/deep/.u-form-item__body {
				margin: 10px 0;
				padding: 14px;
				border-radius: 16px;
				background: rgba(243, 243, 243, 1);
			}

			.remember {
				font-size: 14px;
				font-weight: 400;
				letter-spacing: -0.4px;
				line-height: 18px;
				color: rgba(0, 82, 204, 1);
				text-align: right;
				vertical-align: top;
			}

			.tips {
				margin-top: 20px;
				font-size: 13px;
				font-weight: 400;
				letter-spacing: -0.2px;
				line-height: 17.84px;
				color: rgba(143, 146, 161, 1);
				text-align: center;

				text {
					color: rgba(42, 130, 228, 1);
				}
			}
		}
	}
</style>